<template>
	<view class="conponTag" :style="[customStyle]">{{showName}}</view>
</template>

<script>
	export default{
		props:{
			// 优惠券
			coupon:{
				type:Object,
				default:()=>{}
			},
			showType:{
				type: [String, Number],
				default:1 // 1 8元 领取；  2 领 8元；3 满100元减8元
			},
			customStyle:{
				type:Object,
				default:()=>{}
			}
		},
		computed:{
			showName(){
				console.log(this.coupon)
				return this.coupon.activityRuleList && this.coupon.activityRuleList[0] ?this.showType == 1 ? 
				`${parseFloat(this.coupon.ruleType==0?this.coupon.activityRuleList[0].couponAmount:this.coupon.activityRuleList[0].discountRate*10)}${this.coupon.ruleType==0?'元':'折'} 领取` :
				this.showType == 2 ? 
				`领 ${parseFloat(this.coupon.ruleType==0?this.coupon.activityRuleList[0].couponAmount:this.coupon.activityRuleList[0].discountRate*10)}${this.coupon.ruleType==0?'元':'折'}` : 
				`满${parseFloat(this.coupon.activityRuleList[0].limitWhere)}元${this.coupon.ruleType==0?'减':'打'}${parseFloat(this.coupon.ruleType==0?this.coupon.activityRuleList[0].couponAmount:this.coupon.activityRuleList[0].discountRate*10)}${this.coupon.ruleType==0?'元':'折'}`:null
			}
		}
	}
</script>

<style scoped>
	.conponTag{
		display: inline-block;
		background: linear-gradient(111.42deg, #FF6B00 0%, #F90F00 100%);
		height:32rpx;
		padding:0 8rpx;
		text-align: center;
		line-height: 32rpx;
		font-size: 24rpx;
		color:#fff;
		overflow: hidden;
		position: relative;
	}
	.conponTag:before,.conponTag:after{
		content: '';
		position: absolute;
		background-color: #fff;
		border-radius: 50%;
		display: block;
		width:8rpx;
		height:8rpx;
		top:12rpx;
	}
	.conponTag:before{
		left:-4rpx;
	}
	.conponTag:after{
		right:-4rpx;
	}
</style>
